<template>
    <div class="Addparkinglot">
        <Addtitle>添加停车场</Addtitle>
        <div class="contentbox">
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
                <div class="bascicinfomation">
                    <p class="title">基础信息</p>
                    <div class="basciccontent">
                        <div class="basicleft">
                            <el-form-item label="所属小区" prop="name" class="commoninput">
                                <el-input v-model="ruleForm.name" placeholder="万达文旅城"></el-input>
                            </el-form-item>
                            <el-form-item label="联系人" prop="name" class="commoninput">
                                <el-input v-model="ruleForm.name" placeholder="请输入联系人信息"></el-input>
                            </el-form-item>
                            <el-form-item label="地址" prop="region" class="commoninput">
                                <el-select v-model="ruleForm.region" placeholder="请选择地址" >
                                <el-option label="区域一" value="shanghai"></el-option>
                                <el-option label="区域二" value="beijing"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="车位数量" prop="name" class="commoninput">
                                <el-input v-model="ruleForm.name" placeholder="车位数量"></el-input>
                            </el-form-item>
                            <el-form-item label="营业时间" required class="datainput">
                                <el-col :span="8" class="startdata">
                                    <el-form-item prop="date2">
                                        <el-time-picker placeholder="选择开始时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                                    </el-form-item>
                                </el-col>
                                <el-col class="line" :span="2">-</el-col>
                                <el-col :span="8" class="startdata">
                                    <el-form-item prop="date2">
                                        <el-time-picker placeholder="选择结束时间" v-model="ruleForm.date2" style="width: 100%;"></el-time-picker>
                                    </el-form-item>
                                </el-col>
                            </el-form-item>
                            <el-form-item label="停车场图" prop="image" class="commoninput">
                                <el-upload
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    list-type="picture-card"
                                    :on-preview="handlePictureCardPreview"
                                    :on-remove="handleRemove">
                                    <i class="el-icon-plus"></i>
                                </el-upload>
                                <el-dialog :visible.sync="ruleForm.dialogVisible">
                                    <img width="100%" :src="ruleForm.dialogImageUrl" alt="">
                                </el-dialog>
                            </el-form-item>
                        </div>
                        <div class="basicleft">
                            <el-form-item label="停车场名称" prop="name" class="commoninput">
                                <el-input v-model="ruleForm.name" placeholder="请输入停车场名称"></el-input>
                            </el-form-item>
                            <el-form-item label="联系人电话" prop="name" class="commoninput">
                                <el-input v-model="ruleForm.name" placeholder="请输入联系人电话"></el-input>
                            </el-form-item>
                            <el-form-item label="详细地址" prop="name" class="commoninput">
                                <el-input v-model="ruleForm.name" placeholder="请输入详细地址"></el-input>
                            </el-form-item>
                            <el-form-item label="坐标" prop="name" class="commoninput">
                                <el-input v-model="ruleForm.name" placeholder="请输入坐标"></el-input>
                            </el-form-item>
                            <el-form-item label="状态" prop="resource" class="commoninput">
                                <el-radio-group v-model="ruleForm.resource">
                                <el-radio label="开启"></el-radio>
                                <el-radio label="关闭"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="活动形式" prop="desc" class="commoninput">
                                <el-input type="textarea" v-model="ruleForm.desc" placeholder="请输入备注信息"  maxlength="300"
                                    show-word-limit></el-input>
                            </el-form-item>
                        </div>
                    </div>
                </div>
                <div class="billinginformation">
                    <p class="title">计费信息</p>
                    <div class="basciccontent">
                        <div class="basicleft">
                            <el-form-item label="是否允许外来车辆进入" prop="resource" class="commoninput">
                                <el-radio-group v-model="ruleForm.resource">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            <el-form-item label="是否开启按车型收费" prop="resource" class="commoninput">
                                <el-radio-group v-model="ruleForm.resource">
                                <el-radio label="是"></el-radio>
                                <el-radio label="否"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            
                        </div>
                        <div class="basicleft">
                            <el-form-item label="支付离场时间" prop="name" class="commoninput">
                                <el-input v-model="ruleForm.name" placeholder="请输入分钟"></el-input>
                            </el-form-item>
                            <el-form-item label="计费方式" prop="resource" class="commoninput">
                                <el-radio-group v-model="ruleForm.resource">
                                <el-radio label="方式1：常规+时段"></el-radio>
                                <el-radio label="方式2：时长叠加"></el-radio>
                                </el-radio-group>
                            </el-form-item>
                            
                        </div>
                    </div>
                </div>
                <div class="buttonbox">
                    <el-form-item>
                        <el-button type="primary" @click="submitForm('ruleForm')" class="savebutton">保存</el-button>
                        <el-button @click="resetForm('ruleForm')" class="reasetbutton">重置</el-button>
                    </el-form-item>
                </div>
            </el-form>
        </div>
    </div>
</template>

<script>
import Addtitle from '../components/Addtitle.vue'
export default {
    components:{
        Addtitle
    },
    data() {
      return {
        ruleForm: {
          name: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: '',
          value1: [new Date(2016, 9, 10, 8, 40), new Date(2016, 9, 10, 9, 40)],
          dialogImageUrl: '',
          dialogVisible: false
        },
        rules: {
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],
          region: [
            { required: true, message: '请选择活动区域', trigger: 'change' }
          ],
          date1: [
            { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
          ],
          date2: [
            { type: 'date', required: true, message: '请选择时间', trigger: 'change' }
          ],
          type: [
            { type: 'array', required: true, message: '请至少选择一个活动性质', trigger: 'change' }
          ],
          resource: [
            { required: true, message: '请选择活动资源', trigger: 'change' }
          ],
          desc: [
            { required: true, message: '请填写活动形式', trigger: 'blur' }
          ],
          time:[
            {  required: true, message: '请选择时间', trigger: 'blur' }
          ],
        }
      };
    },
    methods: {
      submitForm(formName) {
        console.log('保存')
        this.$refs[formName].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
      },
      resetForm(formName) {
        this.$refs[formName].resetFields();
      },
      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      }
    }
}
</script>

<style lang="scss" scoped>
    .Addparkinglot{
        width: 1260px;  /* 最大1265px */ 
        margin: auto;
        height: 80vh;
        overflow: scroll;
        scrollbar-width: none;
        background-color: #fff;
        border: 1px solid rgba(233, 233, 233, 1);
        .contentbox{
            padding: 20px 40px;
            padding-right: 60px;
            box-sizing: border-box;
            .billinginformation{
                padding-top: 20px;
                .title{
                    margin-left: 20px;
                    width: 550px;
                    height: 20px;
                    line-height: 20px;
                    border-left: 4px solid rgba(0, 121, 254, 1);
                    padding-left: 10px;
                    margin-bottom: 20px;
                    box-sizing: border-box;
                }
                .basciccontent{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    .basicleft{
                        padding-left: 20px;
                        width: 520px;
                        .commoninput{
                            ::v-deep .el-form-item__label{
                                width: 170px !important;
                            }
                            ::v-deep .el-form-item__content{
                                margin-left: 170px !important;
                            }
                            ::v-deep .el-input__inner{
                                width: 350px;
                                height: 40px;
                            }
                            ::v-deep .el-upload--picture-card{
                                width: 100px;
                                height: 100px;
                                line-height: 100px;
                            }
                            ::v-deep .el-upload--picture-card:hover{
                                border-color: #1abc9c;
                            }
                            ::v-deep .el-upload--picture-card:hover i{
                                color: #1abc9c !important;
                            }
                            ::v-deep .el-textarea__inner{
                                height: 118px;
                                resize: none;
                            }
                        }
                    }
                }
            }
            .bascicinfomation{
                padding-top: 20px;
                .title{
                    margin-left: 20px;
                    width: 550px;
                    height: 20px;
                    line-height: 20px;
                    border-left: 4px solid rgba(0, 121, 254, 1);
                    padding-left: 10px;
                    margin-bottom: 20px;
                    box-sizing: border-box;
                }
                .basciccontent{
                    width: 100%;
                    display: flex;
                    justify-content: space-between;
                    
                }
                .basicleft{
                    padding-left: 20px;
                    width: 520px;
                    .commoninput{
                        ::v-deep .el-form-item__content{
                            margin-left: 120px !important;
                        }
                        ::v-deep .el-input__inner{
                            width: 400px;
                            height: 40px;
                        }
                        ::v-deep .el-upload--picture-card{
                          width: 100px;
                          height: 100px;
                          line-height: 100px;
                        }
                        ::v-deep .el-upload--picture-card:hover{
                            border-color: #1abc9c;
                        }
                        ::v-deep .el-upload--picture-card:hover i{
                            color: #1abc9c !important;
                        }
                        ::v-deep .el-textarea__inner{
                            height: 118px;
                            resize: none;
                        }
                    }
                    .datainput{
                        ::v-deep .el-form-item__content{
                            margin-left: 120px !important;
                        }
                        .startdata{
                            width: 180px;
                            ::v-deep .el-form-item__content{
                                margin-left: 0 !important;
                            }
                        }
                        .line{
                            width: 40px;
                            text-align: center;
                        }
                    }
                }
            }
            .buttonbox{
                width: 100%;
                display: flex;
                justify-content: center;
                align-items: center;
                ::v-deep .el-form-item__content{
                    margin-left: 0 !important;
                }
                .savebutton,.reasetbutton{
                    width: 140px;
                    height: 40px;
                    cursor: pointer;
                }
                .savebutton{
                    background-color: #0079fe;
                }
                .reasetbutton{
                    border-color: #0079fe;
                    color: #0079fe;
                    margin-left: 20px;
                }
                .savebutton:hover{
                    background-color: #3394fe !important;
                    color: #fff !important;
                }
                .reasetbutton:hover{
                    border-color: #3394fe !important;
                    color: #3394fe !important;
                    background-color: #fff !important;
                }
            }
        }
    }
</style>